<template>
	<view class="broswerSearch">
		<StatusBar></StatusBar>
		<view class="header">
			<view class="search">
				<uni-search-bar placeholder="搜索本地DApp或输入链接访问" bgColor="#F5F6F8" :cancelText="cancelText" @cancel=cancel
					:focus="true" v-model="searchValue" @clear="clear" @confirm="search">
					<template v-slot:searchIcon>
						<image src="../../static/images/home/search.png" class="icon" mode=""></image>
					</template>
				</uni-search-bar>
			</view>
		</view>
		<view class="contentBox">
			<view class="title">
				<view class="text">
					历史记录
				</view>
				<view class="delete" v-show="broswer.length>0">
					<text class="iconfont icon-shanchu" @tap="clearBroswer"></text>
				</view>
			</view>
			<view class="list">
				<scroll-view scroll-y="true" class="scroll-Y">
					<!-- {{broswer}} -->
					<view class="scroll-view-item" v-for="(item,index) in broswer" :key="index"
						@tap="webView(item.url)">
						<view class="logo">
							<!-- <view>{{item.icon}}</view> -->
							<image  v-if="!item.showErrImg" :src="item.icon" class="icon" mode="widthFix" @error="item.showErrImg=true "></image>
							<image  v-if="item.showErrImg" src="../../static/images/tokenicon/notoken.png" class="icon" mode="widthFix"></image>
						</view>
						<view class="right">
							<view class="name">
								{{item.title}}
							</view>
							<view class="url">
								{{item.url}}
							</view>
						</view>
					</view>
					<view class="emptyBox" v-if="broswer.length==0">
						<empty></empty>
					</view>
				</scroll-view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
			};
		},
		computed: {
			cancelText() {
				if (this.searchValue) {
					return "前往"
				}
				return "取消"
			},
			broswer() {
				return this.$store.getters.broswer;
			},
			chainId() {
				return this.$store.getters.getChainId
			},
		},
		methods: {
			search(res) {
				const url = res.value.startsWith('http') ? res.value : `https://${res.value}`;
				let cleanUrl = url.split('?')[0]; // 移除查询参数
				cleanUrl = cleanUrl.split('#')[0]; // 移除哈希部分
				uni.request({
					url: cleanUrl,
					method: 'GET',
					success: (response) => {
						const htmlText = response.data;
						// 使用正则表达式提取标题
						const titleMatch = htmlText.match(/<title[^>]*>([^<]+)<\/title>/);
						const title = titleMatch ? titleMatch[1] : 'No Title';
						// 使用正则表达式提取 favicon 图标
						const faviconMatch = htmlText.match(
							/<link[^>]*rel=["'][^"']*icon[^"']*["'][^>]*href=["']([^"']+)["'][^>]*>/i);
						const faviconUrl = faviconMatch ? faviconMatch[1] : '../../static/images=logo.png';
						// 确保 favicon URL 是绝对路径
						const icon = faviconUrl.startsWith('http') ? faviconUrl : faviconUrl;
						const broswer = this.broswer
						// 判断 URL 是否已经存在于记录中
						const existingIndex = broswer.findIndex(item => item.url === cleanUrl);
						if (existingIndex !== -1) {
							// 如果存在，删除该记录
							broswer.splice(existingIndex, 1);
						}
						let data = {
							title,
							url: cleanUrl,
							icon
						}
						broswer.unshift(data)
						this.$store.commit('setBroswer', broswer);
						this.webView(url)
					},
					fail: (error) => {
						uni.showToast({
							title: 'Invalid URL',
							icon: 'none'
						});
					}
				});
			},
			webView(url) {
				if (this.chainId == 0) {
					uni.navigateTo({
						url: `/pages/tronweb/tronweb?url=${url}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/ethweb/ethweb?url=${url}`
					})
				}

			},
			clearBroswer() {
				uni.showModal({
					title: '提示',
					content: `确认删除历史记录？`,
					success: (res) => {
						if (res.confirm) {
							this.$store.commit('setBroswer', []);
						}
					}
				});

			},
			cancel(res) {
				if (res.value) {
					this.search(res)
					this.searchValue = ''
				} else {
					uni.navigateBack();
				}
			}
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	@import "/static/iconfont/iconfont.css";

	.broswerSearch {
		font-weight: 400;
		height: 100%;
		display: flex;
		flex-direction: column;

		.header {
			display: flex;
			align-items: center;
			padding: 0 38upx;

			.search {
				flex: 1;

				.icon {
					width: 26upx;
					height: 26upx;
				}

				.uni-searchbar {
					padding: 20upx 0;
				}

				.uni-searchbar__box {
					height: 66upx;
				}
			}

			.san {
				display: flex;
				margin-left: 26upx;

				.icon {
					width: 54upx;
					height: 54upx;
				}
			}
		}

		.contentBox {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 16upx 38upx;

			.title {
				display: flex;
				justify-content: space-between;
				font-size: 30upx;
				color: #3D3D3D;

				// margin-bottom: 20upx;
				.delete {
					color: #8E8E8E;
				}
			}

			.list {
				flex: 1;
				padding: 20upx 0;

				.emptyBox {
					height: 100%;
				}

				.scroll-Y {
					::-webkit-scrollbar {
						width: 0;
						height: 0;
					}

					height: 100%;

					.scroll-view-item {
						&:nth-last-child(1) {
							margin-bottom: 0;
						}

						margin-bottom: 20upx;
						display: flex;
						background-color: #F5F6F8;
						border-radius: 20upx;
						padding: 20upx 36upx;
						color: #999999;
						align-items: center;

						.logo {
							display: flex;
							margin-right: 20upx;

							.icon {
								width: 60upx;
								height: 60upx;
							}
						}

						.right {
							.name {
								color: #3D3D3D;
								font-size: 28upx;
							}

							.url {
								font-size: 24upx;
							}
						}
					}
				}
			}
		}

	}
</style>